<template>
	<view class="content">
		<form>
			<!-- 表单内容 -->
			<view class="form-item">
				<text class="label" @click="getValue">收货人</text>
				<input class="input" placeholder="请填写收货人姓名" value="" />
			</view>
			<view class="form-item">
				<text class="label" @click="getphone">手机号码</text>
				<input class="input" placeholder="请填写收货人手机号码" value="" />
			</view>
			<view class="form-item">
				<text class="label">所在地区</text>
				<!-- <picker class="picker" mode="region" value=""> -->
				<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
					:range="multiArray">
					<view class="uni-input">
						{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
					</view>
				</picker>

				<view v-if="false">广东省 广州市 天河区</view>
				<!-- <view v-else class="placeholder">请选择省/市/区(县)</view> -->
				<!-- </picker> -->
			</view>
			<!-- 			<view class="form-item">
				<text class="label">详细地址</text>
				<input class="input" placeholder="所在省份、街道、楼牌号等信息" value="" />
			</view> -->
			<view class="form-item">
				<label class="label">设为默认地址</label>
				<switch class="switch" color="#27ba9b" :checked="false" />
			</view>
		</form>
	</view>
	<!-- 提交按钮 -->
	<navigator hover-class="none" url="../address/address">
		<button class="button" @click="addTo">
			保存并使用
		</button>
	</navigator>
</template>



<script>
	import {
		setStorage,
		getStorage,
		removeStorage
	} from '../common/local/local.js'

	export default {
		onShow() {

		},
		data() {
			return {
				name: "",
				phone: "",
				addressValue: "",
				addresslist: [{
					// name:""
				}],
				cartList: [],

				multiArray: [
					['亚洲', '欧洲'],
					['中国', '日本'],
					['北京', '上海', '广州']
				],
				multiIndex: [0, 0, 0],
			}
		},
		methods: {
			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.multiIndex[0]) {
							case 0:
								this.multiArray[1] = ['中国', '日本']
								this.multiArray[2] = ['北京', '上海', '广州']
								break
							case 1:
								this.multiArray[1] = ['英国', '法国']
								this.multiArray[2] = ['伦敦', '曼彻斯特']
								break
						}
						this.multiIndex.splice(1, 1, 0)
						this.multiIndex.splice(2, 1, 0)
						break
					case 1: //拖动第2列
						switch (this.multiIndex[0]) { //判断第一列是什么
							case 0:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['北京', '上海', '广州']
										break
									case 1:
										this.multiArray[2] = ['东京', '北海道']
										break
								}
								break
							case 1:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['伦敦', '曼彻斯特']
										break
									case 1:
										this.multiArray[2] = ['巴黎', '马赛']
										break
								}
								break
						}
						this.multiIndex.splice(2, 1, 0)
						break
				}
				this.$forceUpdate()
			},
			getValue() {
				console.log(this.name)
			},
			getphone() {
				console.log(this.phone)
			},



		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>